<template>
    <view>
        <u-modal @confirm="onConfirmOfSelectProduct" @cancel="onVisibleChange(false)" :show="selectProductModalState" @close="onVisibleChange(false)" :showCancelButton="true"  title="开台品种" >
            <view class="slot-content" style="width: 100%;">
                <u-radio-group v-model="selectProduct" placement="column" iconPlacement="right">
                    <view
                        v-for="(item, index) in productTaskList"
                        :key="index"
                    >
                        <u-radio
                            activeColor="#19be6b"
                            :label="item.productName"
                            :name="item.id"
                            size="29"
                            iconSize="22"
                            labelSize="24"
                            :borderBottom="true"
                            :customStyle="{
                                width: '100%',
                                margin: '8rpx',
                                height: '42px'
                            }"
                        ></u-radio>
                    </view>
                </u-radio-group>
            </view>
        </u-modal>

    </view>
</template>
<script>
    export default {
        props: {
            productTaskList: {
                type: Array,
                default() {
                    return [];
                }
            },
            modalState: {
                type: Boolean,
                default: false
            }
        },
        data() {
            return {
                selectProduct: null,
                selectProductModalState: false
            };
        },
        methods: {
            onConfirmOfSelectProduct() {
                if (this.selectProduct) {
                    this.$emit('confirm', this.productTaskList.find(x => x.id === this.selectProduct) || {});
                } else {
                    uni.showToast({
                        title: '请选择品种',
                        icon: 'error'
                    });
                }
            },
            onVisibleChange(e) {
                this.$emit('on-visible-change', e);
            }
        },
        watch: {
            modalState(newVal) {
                this.selectProductModalState = newVal;
                if (!newVal) {
                    this.selectProduct = null;
                }
            }
        }
    }
</script>
